/**
 * @description 列项面板 - Yuanr
 * @param {String} title - 面板标题
 * @param {Number} padding - 内部控制padding缩进
 * @param {String} arrowText - 面板右侧标题
 * @param {String} arrowColor - 面板右侧颜色
 * @param {Function}} arrowClick - 面板右侧被点击事件
 */
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
import styles from '../styles/common';

export default class ItemPanel extends Component {
  render() {
    const {
      title = '',
      arrowText = '',
      arrowClick = () => {},
      arrowColor = '#999',
      padding = 10
    } = this.props;
    return (
      <View style={[styles.flexbox]}>
        <Text
          style={[
            styles.flex,
            itempanel.itemHeight,
            itempanel.fontSize,
            { paddingLeft: padding, paddingRight: padding }
          ]}
        >
          {title}
        </Text>
        <Text
          style={[
            styles.flex,
            styles.textRight,
            itempanel.itemHeight,
            { color: arrowColor },
            { paddingLeft: padding, paddingRight: padding },
            itempanel.fontSize
          ]}
          onPress={arrowClick}
        >
          {arrowText}
          <Icon name="chevron-small-right" size={20} style={itempanel.verticalAlign} />
        </Text>
      </View>
    );
  }
}

const itempanel = StyleSheet.create({
  fontSize: {
    fontSize: 16
  },
  padding: {
    padding: 10
  },
  itemHeight: {
    lineHeight: 54,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1
  },
  verticalAlign: {
    textAlignVertical: 'top'
  }
});
